<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        用户名：<input type="text" v-model="username"><br>
        密码：<input type="password" v-model="password"><br>
        确认密码：<input type="password" v-model="confirmPassword"><br>
        昵称：<input type="text" v-model="nickname"><br>
        性别：<input type="radio" v-model="gender" value="男">男
        <input type="radio" v-model="gender" value="女">女{{gender}}<br>
        所属城市：<select v-model="sheng">
            <option v-for="(item,index) in arr" :value="index">{{item.name}}</option>
        </select>{{sheng}}
        <select v-model="shi">
            <option v-for="(item,index) in arr[sheng].city" :value="index">{{item.name}}</option>
        </select>
        <select>
            <option v-for="(item,index) in arr[sheng].city[shi].districtAndcounty" :value="item">{{item}}</option>
        </select><br>
        兴趣爱好：<input type="checkbox" v-model="hobby" value="篮球">篮球
        <input type="checkbox" v-model="hobby" value="足球">足球
        <input type="checkbox" v-model="hobby" value="台球">台球
        <input type="checkbox" v-model="hobby" value="乒乓球">乒乓球{{hobby}}<br>
        <button @click="register">提交</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                username: '',
                password: '',
                confirmPassword: '',
                nickname: '',
                gender: '',
                sheng:0,
                shi:0,
                hobby: [],
                arr:[{
                    name: '河南省',
                    city:[{
                        name: '郑州市',
                        districtAndcounty:['中原区','二七区','管城回族区','金水区','上街区','惠济区','中牟县','巩义市','荥阳市','新密市','新郑市','登封市','郑东新区','高新区','经开区']
                    },{
                        name: '洛阳市',
                        districtAndcounty:['西工区','老城区','涧西区','瀍河回族区','洛龙区','吉利区','偃师市','孟津县','新安县','栾川县','嵩县','汝阳县','宜阳县','洛宁县','伊川县','洛阳高新技术产业开发区']
                    },{
                        name: '安阳市',
                        districtAndcounty:['文峰区','北关区','殷都区','龙安区','安阳县','汤阴县','滑县','内黄县','林州市']
                    },{
                        name: '鹤壁市',
                        districtAndcounty:['鹤山区','山城区','淇滨区','浚县','淇县']
                    },{
                        name: '新乡市',
                        districtAndcounty:['红旗区','卫滨区','凤泉区','牧野区','新乡县','获嘉县','原阳县','延津县','封丘县','长垣县','卫辉市','辉县市']
                    }]
                },{
                    name: '河北省',
                    city:[{
                        name: '石家庄市',
                        districtAndcounty:['长安区','桥东区','桥西区','新华区','井陉矿区','裕华区','井陉县','正定县','栾城县','行唐县','灵寿县','高邑县','深泽县','赞皇县','无极县','平山县','元氏县','赵县','辛集市','藁城市','晋州市','新乐市','鹿泉市']
                    },{
                        name: '唐山市',
                        districtAndcounty:['路南区','路北区','古冶区','开平区','丰南区','丰润区','滦县','滦南县','乐亭县','迁西县','玉田县','唐海县','遵化市','迁安市']
                    },{
                        name: '秦皇岛市',
                        districtAndcounty:['海港区','山海关区','北戴河区','青龙满族自治县','昌黎县','抚宁县','卢龙县']
                    },{
                        name: '邯郸市',
                        districtAndcounty:['邯山区','丛台区','复兴区','峰峰矿区','邯郸县','临漳县','成安县','大名县','涉县','磁县','肥乡县','永年县','邱县','鸡泽县','广平县','馆陶县','魏县','曲周县','武安市']
                    },{
                        name: '邢台市',
                        districtAndcounty:['桥东区','桥西区','邢台县','临城县','内丘县','柏乡县','隆尧县','任县','南和县','宁晋县','巨鹿县','新河县','广宗县','平乡县','威县','清河县','临西县','南宫市','沙河市']
                    }]
                },{
                    name: '辽宁省',
                    city:[{
                        name: '沈阳市',
                        districtAndcounty:['和平区','沈河区','大东区','皇姑区','铁西区','苏家屯区','东陵区','新城子区','于洪区','辽中县','康平县','法库县','新民市']
                    },{
                        name: '大连市',
                        districtAndcounty:['中山区','西岗区','沙河口区','甘井子区','旅顺口区','金州区','长海县','瓦房店市','普兰店市','庄河市']
                    },{
                        name: '鞍山市',
                        districtAndcounty:['铁东区','铁西区','立山区','千山区','台安县','岫岩满族自治县','海城市']
                    },{
                        name: '抚顺市',
                        districtAndcounty:['新抚区','东洲区','望花区','顺城区','抚顺县','新宾满族自治县','清原满族自治县']
                    },{
                        name: '本溪市',
                        districtAndcounty:['平山区','溪湖区','明山区','南芬区','本溪满族自治县','桓仁满族自治县']
                    }]
                }],
                yonghulist:[]
            },
            methods: {
                register() {
                    if (this.password !== this.confirmPassword) {
                        alert('两次输入的密码不一致')
                    }else {
                        alert('提交成功')
                        this.yonghulist.push({
                            id: this.yonghulist.length,
                            username: this.username,
                            password: this.password,
                            nickname: this.nickname,
                            gender: this.gender,
                            city: this.arr[this.sheng].name + this.arr[this.sheng].city[this.shi].name + this.arr[this.sheng].city[this.shi].districtAndcounty[0],
                            hobby: this.hobby.join(',')
                        })
                        console.log(this.yonghulist)
                    }
                    this.username = ''
                    this.password = ''
                    this.confirmPassword = ''
                    this.nickname = ''
                    this.gender = ''
                    this.sheng = 0
                    this.shi = 0
                    this.hobby = []

                }
            }
        })
    </script>
</body>
</html>